<!DOCTYPE html>
<html>
<head>
    <title>Loading content with AJAX</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <div id="example" class="k-content">
            <div class="demo-section">
                <ul id="products" class="dairy-photos">
                    <li>
                        <a href="#" data-id="1"><img src="../../content/web/foods/11.jpg" /></a>
                    </li><li>
                        <a href="#" data-id="2"><img src="../../content/web/foods/12.jpg" /></a>
                    </li><li>
                        <a href="#" data-id="3"><img src="../../content/web/foods/31.jpg" /></a>
                    </li><li>
                        <a href="#" data-id="4"><img src="../../content/web/foods/32.jpg" /></a>
                    </li><li>
                        <a href="#" data-id="5"><img src="../../content/web/foods/33.jpg" /></a>
                    </li><li>
                        <a href="#" data-id="6"><img src="../../content/web/foods/59.jpg" /></a>
                    </li><li>
                        <a href="#" data-id="7"><img src="../../content/web/foods/60.jpg" /></a>
                    </li><li>
                        <a href="#" data-id="8"><img src="../../content/web/foods/69.jpg" /></a>
                    </li><li>
                        <a href="#" data-id="9"><img src="../../content/web/foods/72.jpg" /></a>
                    </li>
                </ul>
                <div class="dairy-description">
                    <h2>Dairy Products</h2>
                    <p>Queso Cabrales, Queso Manchego La Pastora, Gorgonzola Telino, Mascarpone Fabioli, Geitost, Raclette Courdavault, Camembert Pierrott, Gudbrandsdalsost, Flotemysost, Mozzarella di Giovanni</p>
                    <p>Hover an image for details.</p>
                </div>
            </div>

            <script>
                var urlFormat = "../../content/web/tooltip/ajax/ajaxContent{0}.html";

                $(document).ready(function() {
                    $("#products").kendoTooltip({
                        filter: "a",
                        content: {
                            url: "../../content/web/tooltip/ajax/ajaxContent1.html"
                        },
                        width: 220,
                        height: 280,
                        position: "top",
                        requestStart: function(e) {
                            e.options.url = kendo.format(urlFormat, e.target.data("id"));
                        }
                    });

                    $("#products").find("a").click(false);
                });
            </script>

            <style scoped>
                .demo-section {
                    height: 460px;
                }
                .dairy-photos {
                    float: left;
                    list-style-type: none;
                    margin: 60px 0 0 60px;
                    padding: 0;
                    width: 330px;
                    line-height: 0;
                }
                .dairy-photos li {
                    display: inline-block;
                    margin: 0;
                    padding: 0;
                    width:110px;
                    height: 110px;
                    position: relative;
                }
                .dairy-photos li:hover {
                    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
                    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
                    box-shadow: 0 0 10px rgba(0,0,0,0.8);
                    z-index: 1;
                }
                .dairy-photos li,
                .dairy-photos li:hover {
                    transition: all .2s;
                    -moz-transition: all .2s;
                    -webkit-transition: all .2s;
                }
                .dairy-photos a {
                    display: inline-block;
                }
                .dairy-description {
                    float: right;
                    width: 200px;
                    margin: 80px 60px 0 0;
                }
                .dairy-description h2 {
                    font-size: 2.7em;
                    font-weight: normal;
                }
                .dairy-description p {
                    line-height: 2em;
                }
                .dairy-details {
                    padding: 10px 0 0 0;
                }
                .dairy-details h3 {
                    font-weight: normal;
                    font-size: 1.5em;
                    margin-top: 10px;
                }
            </style>
        </div>

	
	
		<div class='demo-section'>
			<h3>Note:</h3>
			<p>
				Security restrictions prevent this example from working in all browsers when the page is loaded from the file system (via file:// protocol). 
				If the demo is not working as expected, please host the Kendo folder on a web server. 
			</p>
		</div>
			
</body>
</html>
